<template>

    <div class="dateContainer">
        <div class="imgBox"><img src="../../assets/images/火 箭.png" alt="" class="weather" /> </div>
        <div class="textContainer"><em>宇运供应链</em><em>{{ YMD }}</em></div>
        <div class="date"> <em> {{ date }} </em> </div>
    </div>

</template>

<script setup lang='ts'>
import {onMounted, ref} from 'vue';
import moment from 'moment';


let YMD = ref<string>('')
let date = ref<string>('')

// 获取时间
function getTimesInterval() {
    date.value = moment().format('HH:mm');
    YMD.value = moment().format('YYYY-M-D');
}
// 每秒调用一次↑
function getTimes() {
    setInterval(getTimesInterval, 1000);
}

onMounted(()=>
    getTimes()
)


</script>

<style lang="scss" scoped>
.dateContainer {
    width: 280px;
    display: flex;
    height: 40px;
    flex-direction: row;
    align-items: center;
    margin-right: 50px;
    justify-content: center;
    background: linear-gradient(to left, #a3bef1, #a3bef1) left top no-repeat,
        linear-gradient(to bottom, #a3bef1, #a3bef1) left top no-repeat,
        linear-gradient(to left, #a3bef1, #a3bef1) right top no-repeat,
        linear-gradient(to bottom, #a3bef1, #a3bef1) right top no-repeat,
        linear-gradient(to left, #a3bef1, #a3bef1) left bottom no-repeat,
        linear-gradient(to bottom, #a3bef1, #a3bef1) left bottom no-repeat,
        linear-gradient(to left, #a3bef1, #a3bef1) right bottom no-repeat,
        linear-gradient(to left, #a3bef1, #a3bef1) right bottom no-repeat;
    background-size: 1px 10px,10px 1px, 1px 10px,10px 1px;
    .imgBox {
        height: 100%;
        display: flex;
        align-items: center;

        img {
            width: 30px;
            height:30px;
            display: inline-block;
            margin-right:12px;
        }
    }

    .textContainer {
        width: auto;
        height: 100%;
        display: flex;
        align-items: center;
        flex-direction: column;
        margin-right:12px;
        em {
            width: 100%;
            text-align: center;
            font-size: 14px;
            display: inline-block;
        }
    }

    .date {
        height: 100%;
        display: flex;
        align-items: center;

        em {
            display: flex;
            color: #a3bef1;
            font-weight: 600;
            font-size: 24px;
        }
    }
}
</style>
